import '../../css/public.less'
import './Css/AddPromotion/AddPromotion.less'
import React, { useState } from 'react';
import { Button, Form, Input, InputNumber, Select, DatePicker, Switch } from 'antd';
import { useLocation } from 'react-router-dom'
import getSelectTime from '../../../utils/date';
import {addData} from '../../../api/wj'
function AddPromotion() {
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const rangeConfig = {
        rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
    };
    const config = {
        rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
    };
    const { RangePicker } = DatePicker;
    //预上架时间
    const [advance,setAdvance] = useState<string>()
    //s使用路由传参
    const state = useLocation()
    // console.log('state',state);
    // //预上架时间
    // const changeTrAdvance=(data:any,dateString: string)=>{
    //     setAdvance(dateString)
    // }
    const [type, setType] = useState<{ sportId: number, sportName: string }[]>(state.state)
    /* eslint-disable no-template-curly-in-string */
    const validateMessages = {
        required: '${label} is required!',
        types: {
            email: '${label} is not a valid email!',
            number: '${label} is not a valid number!',
        },
        number: {
            range: '${label} must be between ${min} and ${max}',
        },
    };
    const chageTime =(data:any,dateString: string)=>{
        setAdvance(dateString)
    }
    /* eslint-enable no-template-curly-in-string */
    const onFinish = (values: any) => {
        console.log('促销的信息', values);
        let start = getSelectTime(values.range_time_picker[0])
        let end =  getSelectTime(values.range_time_picker[1])
        let data:any = {advance:advance,end:end,price:values.price,sport:values.sport,start:start,state:values.state?1:0,title:values.title}
        console.log('data的数据',data);
        addData(data).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
            
        })
        
    };

    return (
        <div className='Promotionma'>
            {/* 头部 */}
            <div className='page-top'>
                <div className='page-title'>
                    <p>添加促销</p>
                </div>
            </div>
            <div className='page-content'>
                <div className='Box'>
                    <p>添加促销</p>
                    <div className='table'>
                        <Form
                            {...layout}
                            name="nest-messages"
                            onFinish={onFinish}
                            style={{ maxWidth: 600 }}
                            validateMessages={validateMessages}
                        >
                            <Form.Item label="促销标题" name='title' rules={[{ required: true }]}>
                                <Input />
                            </Form.Item>
                            <Form.Item label="抵扣金额">
                                <Form.Item name="price" noStyle>
                                    <InputNumber min={1} max={10000} />
                                </Form.Item>
                                <span className="ant-form-text" style={{ marginLeft: 8 }}>
                                    元
                                </span>
                            </Form.Item>
                            <Form.Item label="适用行程类型" name="sport">
                                <Select>
                                    {type.map((item) => {
                                        return <Select.Option key={item.sportId} value={item.sportId}>{item.sportName}</Select.Option>
                                    })}
                                </Select>
                            </Form.Item>
                            <Form.Item name="range_time_picker" label="上架时间段" {...rangeConfig}>
                                <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                            </Form.Item>
                            <Form.Item name="advance" label="预上架时间" {...config}>
                                <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" onChange={chageTime}/>
                            </Form.Item>
                            <Form.Item label="上架" name="state" valuePropName="checked">
                                <Switch />
                            </Form.Item>
                            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                                <Button type="primary" htmlType="submit">
                                    提交
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default AddPromotion
//添加促销页面